<!-- 农业知识详情 -->
<template>
    <div class="knowlege-detail-container">
        <el-page-header @back="router.back()" icon="DArrowLeft" title="返回">
            <template #content>
                <span style="font-size: 15px;"> 知识详情 </span>
            </template>
        </el-page-header>
        <div class="title">{{ updateInfo.title }}</div>
        <div class="tips">
            <div style="width: 10px;height: 30px;background-color:antiquewhite;margin-right: 10px;">&nbsp;</div>
            <span>作者：</span>
            <span style="margin-right:20px;">{{ updateInfo.ownName }}</span>
            <span>日期：</span>
            <span>{{ time(updateInfo.updateTime) }}</span>
        </div>
        <div class="detail-img">
            <video v-if="updateInfo.type === 'mp4' || updateInfo.type === 'MP4'" id="video" width="900" height="360"
                src="@\assets\default.jpg" controls> </video>
            <img v-else style="width:500px;" :src="updateInfo.picPath" alt="" />
        </div>
        <div class="detail-content">
            {{ updateInfo.content }}
        </div>
        <el-input style="width: 95%;" type="textarea" v-model="content" :rows="5"></el-input>
        <div style="width: 95%;margin-top:20px;display: flex;flex-direction: row;justify-content: flex-end">
            <el-button type="success" @click="handleComment">添加评论</el-button>
        </div>
        <div class="comment-container">
            <div class="comment-num">评论共{{ commentArray.length || 0 }}条</div>
            <div class="comment-item" v-for="(item, index) in commentArray" :key="index">
                <div>{{ item.content }}</div>
                <div class="comment-tips">
                    <div style="margin-right:40px;">评论人：<span class="color6">{{ item.ownName }}</span></div>
                    <div>评论时间：<span class="color6">{{ time(item.createTime) }}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { selectKnowledgeById, selectComment, addComment } from '@/api/knowledge';
import { ElMessage } from 'element-plus'

const route = useRoute();
const router = useRouter();
const updateInfo = ref({})
const content = ref('')
const commentArray = ref([])

//加载数据
const load = () => {
    selectKnowledgeById({
        knowledgeId: route.params.id
    }).then((res) => {
        updateInfo.value = res.data
    })
    selectComment({
        knowledgeId: route.params.id
    }).then(res => {
        commentArray.value = res.data
    })
}
load()

//添加评论
const handleComment = () => {
    if (content.value === '') {
        ElMessage({
            message: "评论内容不能为空！",
            type: 'error',
        })
        return
    }
    addComment({
        knowledgeId: route.params.id,
        content: content.value
    }).then(res => {
        if (res.flag) {
            content.value = ''
            ElMessage({
                message: res.message,
                type: 'success',
            })
            load()
        }
    })
}


//格式化时间
const time = (value) => {
    let date = new Date(value);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let d = date.getDate();
    d = d < 10 ? "0" + d : d;
    let h = date.getHours();
    h = h < 10 ? "0" + h : h;
    let m = date.getMinutes();
    m = m < 10 ? "0" + m : m;
    let s = date.getSeconds();
    s = s < 10 ? "0" + s : s;
    return y + "-" + MM + "-" + d + " " + h + ":" + m;
}

</script>

<style lang="scss" scoped>
.knowlege-detail-container {
    width: 900px;
    margin: 0 auto;
    background: #fff;
    min-height: 100%;
    margin-top: 10px;
    padding: 30px;
    padding-top: 20px;

    .title {
        margin-top: 10px;
        font-size: 20px;
        text-align: left;
        color: black;
        font-weight: bold;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tips {
        color: #999;
        display: flex;
        justify-content: left;
        height: 30px;
        align-items: center;
        background-color: #e9f5ec;
        padding: 0;
    }

    .detail-img {
        display: flex;
        justify-content: left;
        margin-top: 10px;
        margin-bottom: 10px;

        video {
            border: 1px solid #f2f2f2;
        }

        img {
            border-radius: 6px;
        }
    }

    .detail-content {
        text-align: left;
        color: black;
        white-space: wrap;
        overflow: hidden;
        ;
        line-height: 35px;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 30px;
        padding-right: 20px;
    }

    .comment-container {
        margin: 0 auto;
        text-align: left;
        clear: both;
        margin-top: 10px;
        color: black;

        .comment-num {
            font-weight: bold;
        }

        .comment-item {
            width: 95%;
            border-bottom: 1px solid #f2f2f2;
            padding: 10px 20px;
            margin: 20px 0;
            word-break: break-all;

            .comment-tips {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;

                .color6 {
                    color: #666;
                }
            }
        }
    }
}
</style>